<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 动画封装</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<!--<style>-->
    <!--.fade-enter,.fade-leave-to{-->
        <!--opacity: 0;-->
    <!--}-->
    <!--.fade-enter-active,.fade-leave-active{-->
        <!--transition: opacity 1s;-->
    <!--}-->
<!--</style>-->
<body>
<div id="app">
    <fade :show="show">
        <div>hello world</div>
    </fade>
    <fade :show="show">
        <h1>hello world</h1>
    </fade>
    <button @click="handleBtnClick">toggle</button>
</div>
<script>
    Vue.component("fade",{
        props:["show"],
        template:`
            <transition name="fade"
                        @before-enter="handleBeforeEnter"
                        @enter="handleEnter">
                <slot v-if="show"></slot>
            </transition>
        `,
        methods: {
            handleBeforeEnter:function (el) {
                el.style.color="red";
            },
            handleEnter:function (el,done) {
                setTimeout(()=>{
                    el.style.color="green";
                    done();
                },2000);
            }
        }
    });
    let vm = new Vue({
        el: '#app',
        data: {
            show:false
        },
        methods:{
            handleBtnClick:function () {
                this.show=!this.show;
            }
        }
    });
</script>
</body>
</html>